{extend name="base"}
{block name="main"}
<div id="app" v-cloak>
	<el-row class="ws-quote">
		<el-col :span="10" >
			<el-button @click="onSubmit(true,'{:url(\'del\')}',{ids:checkData})" :disabled="!checkData.length" type="danger" size="small">删除</el-button>
			<el-button @click="onSubmit(true,'{:url(\'close\')}',{ids:checkData})" :disabled="!checkData.length" type="danger" size="small">启用/禁用</el-button>
			<el-button type="primary" size="small" @click="dialogVisible=true">添加角色</el-button>
		</el-col>
	</el-row>
	<el-table @selection-change="selectionChange" :data="tableData" border stripe>
		<el-table-column type="selection" width="40"></el-table-column>
		<el-table-column prop="id" label="ID" sortable align="center" width="70"></el-table-column>
		<el-table-column prop="name" label="角色名称"></el-table-column>
		<el-table-column prop="remark" label="说明"></el-table-column>
		<el-table-column label="状态" sortable align="center">
			<template slot-scope="scope">
				<template v-if="scope.row.status">
					启用
				</template>
				<template v-else>
					禁用
				</template>
			</template>
		</el-table-column>
		<el-table-column label="是否默认角色" sortable align="center">
			<template slot-scope="scope">
				<template v-if="scope.row.is_default">
					是
				</template>
				<template v-else>
					否
				</template>
			</template>
		</el-table-column>
		
		<el-table-column label="操作">
			<template slot-scope="scope">
				<el-button type="danger" size="mini" class="ws-mini" @click="onGet('{:url(\'del\')}?id='+scope.row.id,true)">删除</el-button>

				<el-button type="danger" size="mini" class="ws-mini" @click="close(scope.row)" v-if="scope.row.status">禁用</el-button>
				<el-button type="primary" size="mini" class="ws-mini" @click="close(scope.row)" v-else>启用</el-button>

				<el-button type="primary" size="mini" class="ws-mini" @click="edit(scope.row)">编辑</el-button>
				<el-button type="primary" size="mini" class="ws-mini" @click="member(scope.row.id,scope.row.name)">分配会员</el-button>
				<el-button type="primary" size="mini" class="ws-mini" @click="auth(scope.row.id,scope.row.name)">分配权限</el-button>
				<el-button type="primary" size="mini" class="ws-mini" @click="nav(scope.row.id,scope.row.name)">分配菜单</el-button>
				<el-button type="primary" size="mini" class="ws-mini" @click="setDefaultRole(scope.row)" v-if="!scope.row.is_default">
					设为默认角色
				</el-button>
				<el-button type="warning" size="mini" class="ws-mini" @click="setDefaultRole(scope.row)" v-if="scope.row.is_default">
					取消默认角色
				</el-button>
			</template>
		</el-table-column>
	</el-table>
	<div class="page">{$list->render()|raw}</div>
	
	<!-- 添加、编辑角色 start -->
	<el-dialog :title="dialogTitle" width="500px" :visible.sync="dialogVisible">
		<el-form ref="forms" :model="data" :rules="rules" label-width="80px">
			<el-form-item label="名称" prop="name">
				<el-input v-model="data.name" placeholder="名称"></el-input>
			</el-form-item>
			</el-form-item>
			<el-form-item label="说明">
				<el-input type="text" v-model="data.remark" placeholder="说明"></el-input>
			</el-form-item>
			<el-form-item label="状态">
				<el-radio-group v-model="data.status">
				    <el-radio :label="0">禁用</el-radio>
				    <el-radio :label="1">启用</el-radio>
				  </el-radio-group>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
	    	<el-button @click="dialogVisible = false">取 消</el-button>
	    	<el-button type="primary" @click="onSubmit('forms','{:url(\'add\')}')">提 交</el-button>
	  	</div>
	</el-dialog>
	<!-- 添加、编辑角色 end -->

	<!-- 权限分配 start -->
	<el-dialog :title="authTitle" width="70%" :visible.sync="showAuth">
		<el-input
		  class="m_y10"
		  placeholder="输入关键字进行过滤"
		  v-model="filterAuthText">
		</el-input>
		<el-tree
		  ref="authTree"
		  :data="nodes"
		  :props="{label:'title'}"
		  accordion
		  node-key="id"
		  :filter-node-method="filterAuth"
		  show-checkbox
		  @check="grant"
		  >
		  	<span slot-scope="{node,data}">
			  	<el-tooltip :content="data.remark" placement="right-end" v-if="data.remark">
				    <span v-if="data.action!=='0'">
						{{data.title}}({{data.name}})
				    </span>
				    <span v-else>{{data.title}}</span>
			    </el-tooltip>

			    <template v-else>
				    <span v-if="data.action!=='0'">
						{{data.title}}({{data.name}})
				    </span>
				    <span v-else>{{data.title}}</span>
			    </template>
		    </span>
		</el-tree>
	</el-dialog>
	<!-- 权限分配 end -->

	<!-- 菜单分配 start -->
	<el-dialog width="70%" :visible.sync="showNavs">
		<div slot="title">
			{{navTitle}} 
			<el-select v-model="navs_module">
			    <el-option label="后台模块" value="admin"></el-option>
			    <el-option label="用户中心" value="member"></el-option>
			</el-select>
		</div>
		<el-tree
		  :render-after-expand="false"
		  ref="navsTree"
		  :props="navProps"
		  :data="navs"
		  node-key="id"
		  show-checkbox
		  @check="checkNavs">
		</el-tree>
	</el-dialog>
	<!-- 菜单分配 end -->

	<!-- 会员分配 start -->
	<el-dialog :title="memberTitle" width="70%" :visible.sync="showMember">
		<el-checkbox-group v-model="checkMembers" @change="grantMember">
		    <el-checkbox :label="item.id" v-for="item of members" class="p_y5">{{item.name}}</el-checkbox>
		</el-checkbox-group>
	</el-dialog>
	<!-- 会员分配 end -->

</div>

{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}

<script>
var app=new Vue({
	el:"#app",
	mixins:[wsMixins],
	data:{
		tableData:{$list->toJson()|raw}, // 列表数据
		checkData:[], // 选中数据
		nodes:{$nodes|raw}, //权限节点
		defaultCheckAuth:[], //默认选中的权限
		showAuth:false, // 显示权限分配框
		authTitle:'权限分配',
		filterAuthText:'', //权限过滤关键词
		role_id:null,

		// 菜单
		showNavs:false,
		navs_module:'admin',
		navTitle:'菜单分配',
		navs:{$navs|raw},
		navProps:{
			label:'title',
			children:'children'
		},
		defaultCheckNavs:[],

		// 分配会员
		memberTitle:'会员分配',
		showMember:false,
		members:{$members->toJson()|raw},
		defaultCheckMember:[], 
		checkMembers:[],


		dialogVisible:false, // 显示添加、编辑框
		dialogTitle:'添加角色', // 添加、编辑框标题
		data:{}, // 添加、编辑数据
		rules:{
			name:[
				{required: true, message:'请输入角色名称'},
			],
		},
	},
	created(){
		this.emptyData();
	},
	watch:{
		dialogVisible(newVal){
			if(!newVal&&this.data.id){
				this.emptyData();
				this.dialogTitle='添加角色';
			}
		},
		// 用户选择菜单模块
		navs_module(newVal){
			this._wspost("{:url('getNavs')}",{val:newVal},res=>{
				this.navs=res.data;
			});
			this._initNavsCheck(this.role_id);
		},
		filterAuthText(val) {
        	this.$refs.authTree.filter(val);
      	},
	},
	methods:{
		// 权限搜索过滤
		filterAuth(value,data) {
        	if (!value) return true;
        	return data.title.indexOf(value)!== -1||data.name.indexOf(value)!==-1;
      	},
		// 用户选择发生改变
		selectionChange(data){
			this.checkData=data.map(item=>{
				return item.id;
			})
		},
		emptyData(newData={}){
			this.data=Object.assign({
				name:'',
				status:1,
				remark:'',
			},newData);
		},
		// 角色启用、禁用
		close(row){
			this._wspost("{:url('close')}",{id:row.id},res=>{
				if(res.code){
					row.status=Math.abs(row.status-1);
				}
			},false);
		},
		// 设置、取消默认角色
		setDefaultRole(row){
			this._wspost("{:url('setDefaultRole')}",{id:row.id},res=>{
				if(res.code){
					row.is_default=Math.abs(row.is_default-1);
				}
			},'json')
		},
		//角色编辑
		edit(data){
			this.emptyData(data);
			this.dialogTitle='角色编辑';
			this.dialogVisible=true;
		},
		// 打开会员分配框
		member(id,name){
			this.memberTitle='会员分配('+name+')';
			this.role_id=id;
			$.post("{:url('getMemberIds')}",{id},res=>{
				if(typeof res==='string'){
					res=JSON.parse(res);
				}
				if(res.code){
					this.defaultCheckMember=res.data;
					this.checkMembers=res.data;
					this.showMember=true;
				}
			},'json')
		},
		// 分配权限
		grantMember(ids){
			let defaultCheckMember=this.defaultCheckMember;
			let diff=[];
			if(ids.length>defaultCheckMember.length){
				let defaults=new Set(defaultCheckMember)
				diff=ids.filter(x=>!defaults.has(x));
			}else{
				let ids_set=new Set(ids)
				diff=defaultCheckMember.filter(x=>!ids_set.has(x));
			}
			this._wspost("{:url('grantMember')}",{diff,role_id:this.role_id},res=>{
				if(res.code===0){ // 还原
					this.checkMembers=defaultCheckMember;
				}else{
					this.defaultCheckMember=ids;
				}
			},false);
		},
		// 打开菜单分配框
		nav(id,name){
			this.navTitle='菜单分配('+name+')';
			this.role_id=id;
			this._initNavsCheck(id,true);
		},
		// 初始化用户选中的菜单
		_initNavsCheck(role_id,showNavs=false){
			$.post("{:url('getNavsKeys')}",{id:role_id,module:this.navs_module},res=>{
				if(typeof res==='string'){
					res=JSON.parse(res);
				}
				if(res.code){
					if(showNavs){
						this.showNavs=true;
					}
					this.$nextTick(_=>{
						this.defaultCheckNavs=res.data;
						this.setCheckedNavs(res.data);
					})
				}
			},'json');
		},
		// 菜单分配
		checkNavs(row,data){
			let ids=data.checkedKeys;
			let defaultCheckNavs=this.defaultCheckNavs;
			let diff=[];
			if(ids.length>defaultCheckNavs.length){
				let defaults=new Set(defaultCheckNavs)
				diff=ids.filter(x=>!defaults.has(x));
			}else{
				let ids_set=new Set(ids)
				diff=defaultCheckNavs.filter(x=>!ids_set.has(x));
			}
			this._wspost("{:url('grantNavs')}",{diff,role_id:this.role_id,module:this.navs_module},res=>{
				if(res.code===0){ // 还原
					this.setCheckedNavs(defaultCheckNavs);
				}else{
					this.defaultCheckNavs=ids;
				}
			},false);
		},
		// 设置当前选中的菜单节点
		setCheckedNavs(ids){
			if(Array.isArray(ids)){
				this.$refs.navsTree.setCheckedKeys(ids);
			}
		},
		// 打开权限分配框
		auth(id,name){
			this.authTitle='权限分配('+name+')';
			this.role_id=id;
			$.post("{:url('getNodeIds')}",{id},res=>{
				if(typeof res==='string'){
					res=JSON.parse(res);
				}
				if(res.code){
					this.defaultCheckAuth=res.data;
					this.showAuth=true;
					this.$nextTick(_=>{
						this.$refs.authTree.setCheckedKeys(res.data);
					});
				}
			},'json')
		},
		// 分配权限
		grant(row,data){
			let ids=data.checkedKeys;
			let defaultCheckAuth=this.defaultCheckAuth;
			let diff=[];
			if(ids.length>defaultCheckAuth.length){
				let defaults=new Set(defaultCheckAuth)
				diff=ids.filter(x=>!defaults.has(x));
			}else{
				let ids_set=new Set(ids)
				diff=defaultCheckAuth.filter(x=>!ids_set.has(x));
			}
			this._wspost("{:url('grant')}",{diff,role_id:this.role_id,module:this.navs_module},res=>{
				if(res.code===0){ // 还原
					this.setCheckedNavs(defaultCheckAuth);
				}else{
					this.defaultCheckAuth=ids;
				}
			},false);
		},
		
	}
});
</script>

{/block}